<template>
	<view class="content" style="margin-bottom: 100rpx;">
		<u-modal
			v-model="show"
			confirm-color="#1A1A1A"
			@confirm="confirm"
			show-title="false"
			:async-close="true"
		>
			<view class="slot-content" style="padding: 60rpx;">
				<input
					type="digit"
					value=""
					v-model="wdrlAmt"
					placeholder="请输入提现金额"
					focus="true"
					adjust-position
					style="padding:  3rpx 50rpx; border-bottom: 1rpx solid #333; margin: 20rpx; "
					
				/>
				<u-radio-group
					v-model="value"
					@change="radioGroupChange"
					wrap
					style="margin-bottom: 10rpx;"
				>
					<u-radio
						@change="radioChange"
						v-for="(item, index) in list111"
						:key="index"
						:name="item.name"
						:disabled="item.disabled"
						shape="square"
						active-color="#ffa73d"
					>
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</view>
		</u-modal>
		<view class="tankuang" v-if="isTouming">
			<view class="box">
				<image
					src="../../../static/guanbi.png"
					mode=""
					class="image"
					@click="isTouming = false"
				></image>
				<text class="text">{{ bulletInfo.name }}</text>
				<view class="info1">
					<image src="../../../static/ss2.png" mode=""></image>
					<text>{{ bulletInfo.phone }}</text>
				</view>
				<view class="info1">
					<image src="../../../static/ss3.png" mode=""></image>
					<text>{{ bulletInfo.site }}</text>
				</view>
				<view class="info1">
					<image src="../../../static/ss1.png" mode=""></image>
					<text>
						{{
							bulletInfo.site_time == null
								? ''
								: bulletInfo.site_time
						}}
					</text>
				</view>
			</view>
		</view>
		<view class="withdraw">
			<text class="text">￥{{ money }}</text>
			<text class="text1" @click="this.show = true">提现</text>
		</view>
		<view
			v-for="(item, index) in data"
			:key="index"
			style="margin-bottom: 20rpx;"
		>
			<view class="ordr" style="">
				<view class="top">
					<view class="sts">
						<text class="text">
							当前为{{ item.num }}/{{ item.full }}单:
						</text>
						<view class="image">
							<bolck
								v-for="(item2, index2) in item.full + 1"
								:key="index2"
							>
								<image
									src="../../../static/mmm2.png"
									mode=""
									v-if="index2 < item.num"
								></image>
								<image
									src="../../../static/caise2.png"
									mode=""
									v-else-if="
										index2 === item.full &&
											item.num < item.full
									"
								></image>
								<image
									src="../../../static/caise333.png"
									mode=""
									v-else-if="
										index2 === item.full &&
											item.num === item.full
									"
								></image>
								<image
									src="../../../static/mmm1.png"
									mode=""
									v-else
								></image>
							</bolck>
						</view>
					</view>
					<view class="prc">
						<text>￥{{ item.free_money }}</text>
						<text>当前免单金</text>
					</view>
				</view>

				<view class="one">
					<view class="ordrNum">
						<text class="text1">订单号:{{ item.number }}</text>
						<text class="text2">{{ item.status }}</text>
					</view>
					<view class="info">
						<view class="top1">
							<view class="left">
								<image
									:src="item.cover"
									mode=""
									@click="storeIntroduction(item.sid)"
								></image>
							</view>
							<view class="right">
								<view class="right1">
									<view
										class=""
										@click="storeIntroduction(item.sid)"
									>
										{{ item.name }}
									</view>
									<image
										src="../../../static/zhu111.png"
										mode=""
										@click="getLocationBulletBox(item.id)"
									></image>
								</view>
								<view class="right2">
									<text @click="storeIntroduction(item.sid)">
										已售{{ item.sold }}
									</text>
									<text @click="storeIntroduction(item.sid)">
										人均￥{{ item.price }}/人
									</text>
									<!-- <text @click="storeIntroduction(item.sid)">点评:{{item.review}}</text> -->
								</view>
								<view class="right3">
									<text @click="storeIntroduction(item.sid)">
										{{ item.type }}
									</text>
									<text
										@click="storeIntroduction(item.sid)"
										class="text"
									>
										{{ item.site }}
									</text>
									<text>{{ item.changdu }}km</text>
								</view>
								<view class="right4">
									<text @click="storeIntroduction(item.sid)">
										{{ item.free }}
									</text>
									<!-- <text>5折</text> -->
									<text>￥{{ item.money }}</text>
								</view>
								<view class="right5">
									<!-- <text>活动时间:永久</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			list111: [
				{
					name: '微信',
					disabled: false
				},
				{
					name: '支付宝',
					disabled: false
				},
				{
					name: '银行卡',
					disabled: false
				}
			],
			wdrlSts: 1, // 提现状态

			value: '微信', // 被默认选中
			show: false,
			wdrlAmt: '', // 输入的提现金额
			uid: '',
			data: [],
			isTouming: false,
			bulletInfo: {},
			page: 1, // 多少页
			limit: 4, // 一页显示多少个
			msg: 0, //  显示的总条数
			status: 'loadmore',
			money: ''
		};
	},
	methods: {
		radioChange(e) {
			console.log('e', e);
			if (e === '微信') {
				this.wdrlSts = 1;
				console.log('this.wdrlSts :>> ', this.wdrlSts);
			} else if (e === '支付宝') {
				this.wdrlSts = 2;
				console.log('this.wdrlSts :>> ', this.wdrlSts);
			} else {
				this.wdrlSts = 3;
				console.log('this.wdrlSts :>> ', this.wdrlSts);
			}
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			//console.log(e);
		},
		// 提现金额
		async confirm() {
			if (Number(this.wdrlAmt) && Number(this.wdrlAmt) <= this.money) {
				const res = await this.$u.post('api/shop/withdrawal', {
					uid: this.uid,
					money: this.wdrlAmt,
					type: this.wdrlSts,
					
				});
				console.log('res >>  ', res);
				uni.$showMsg(res.msg);
				setTimeout(() => {
					this.show = false; // 关闭模态框
					this.wdrlAmt = '';
				}, 1000);
			} else {
				this.wdrlAmt = '';
				this.show = false;
				return uni.$showMsg('请输入正确的金额');
			}
		},

		//计算赌徒距离
		calculateDistance(lat1, lng1, lat2, lng2) {
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s =
				2 *
				Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
								Math.cos(radLat2) *
								Math.pow(Math.sin(b / 2), 2)
					)
				);
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10000;

			s = s.toFixed(2);
			return s;
		},

		//获取位置弹框
		async getLocationBulletBox(sid) {
			this.isTouming = true;
			const { data: res } = await this.$u.post('api/shop/shop_site', {
				sid: sid
			});
			this.bulletInfo = res;
			console.log('this.bulletInfo >>  ', this.bulletInfo);
		},
		//跳转门店介绍
		storeIntroduction(id) {
			uni.navigateTo({
				url: '../../my/introduction/introduction?id=' + id
			});
		},
		//获取商户订单
		async getMerchOrdr() {
			const res = await this.$u.post('api/shop/shop_order', {
				uid: this.uid,
				page: this.page,
				limit: this.limit
			});

			console.log('res商户订单 :>> ', res);

			this.msg = res.msg;
			this.money = res.msg.money;
			console.log('this.money :>> ', this.money);
			if (res.data.length == this.limit) {
				this.status = 'loading';
				this.data = [...this.data, ...res.data];
			} else {
				this.data = [...this.data, ...res.data];
				this.status = 'nomore';
				return false;
			}

			this.data.forEach((e, index) => {
				try {
					const userLocation = uni.getStorageSync('userLocation');
					if (userLocation) {
						var _this = this;
						var list = userLocation.split(',');
						var longitude1 = list[0];
						var latitude2 = list[1];
						console.log('longitude1 :>> ', longitude1);
						console.log('latitude2 :>> ', latitude2);
						console.log('longitude11111 :>> ', e.longitude);
						console.log('dimension22222 :>> ', e.dimension);

						var juli = this.calculateDistance(
							longitude1,
							latitude2,
							e.longitude,
							e.dimension
						);
						console.log('当前的距离>> ', juli);
						_this.data[index].changdu = juli;
						//e1[index1].changdu = juli
					}
				} catch (e) {
					// error
				}
			});
		}
	},
	onLoad() {
		try {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.uid = uid;
			}
		} catch (e) {
			// error
		}
		this.getMerchOrdr();
	},
	onReachBottom() {
		this.page = this.page + 1;
		this.getMerchOrdr();
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	padding: 30rpx;
	// background-color: #f8f8f8;

	.withdraw {
		width: 100vw;
		height: 100rpx;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		border-radius: 15rpx 15rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffa73d;
		.text,
		.text1 {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}
		.text {
			color: #ff0000;
		}
	}
	.tankuang {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;

		.box {
			position: relative;
			width: 560rpx;
			height: 400rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 362rpx;

			.text {
				display: block;

				height: 85rpx;
				line-height: 85rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #333333;

				border-bottom: 2rpx solid #c7c7c7;
			}

			.info1 {
				display: flex;
				align-items: center;
				margin-top: 35rpx;
				margin-left: 50rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 31rpx;
				}

				text {
					font-size: 30rpx;
					font-family: 'Microsoft YaHei', 'Microsoft YaHei',
						PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.image {
				position: absolute;
				right: -60rpx;
				top: -60rpx;
				width: 71rpx;
				height: 71rpx;
			}
		}
	}

	.ordr {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		//background-color: #555555;

		.top {
			width: 100%;
			height: 90rpx;
			border-bottom: 2rpx solid #ececec;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.sts {
				display: flex;
				align-items: center;

				.text {
					line-height: 90rpx;
					font-size: 34rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-right: 20rpx;
				}

				.image {
					image {
						display: inline-block;
						line-height: 90rpx;
						width: 46rpx;
						height: 46rpx;
						margin-right: 7rpx;
					}
				}
			}

			.prc {
				// margin-left: 80rpx;

				text:nth-child(1) {
					display: block;
					font-size: 36rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #ff0000;
					text-align: right;
				}

				text:nth-child(2) {
					display: block;
					margin-top: -6rpx;
					font-size: 20rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #ff0000;
					text-align: right;
				}
			}
		}

		.one {
			border-bottom: 2rpx solid #ececec;
			padding-bottom: 20rpx;

			.ordrNum {
				display: flex;
				justify-content: space-between;
				margin: 18rpx 0 0 0;

				.text1 {
					height: 23px;
					font-size: 24rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.text2 {
					height: 23rpx;
					font-size: 23rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 500;
					color: #ff0000;
				}
			}

			.info {
				// width: 690rpx;
				background: #fff;
				border-radius: 20rpx;
				// padding: 20rpx;

				.top1 {
					display: flex;

					.left {
						width: 201rpx;
						height: 241rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						width: 430rpx;

						.right1 {
							height: 30rpx;
							line-height: 30rpx;
							display: flex;
							justify-content: space-between;
							margin-bottom: 19rpx;

							view {
								height: 30rpx;
								font-size: 30rpx;
								font-family: 'Microsoft YaHei', PingFang SC;
								font-weight: 500;
								color: #333333;
							}

							image {
								width: 90rpx;
								height: 30rpx;
							}
						}

						.right2 {
							height: 23rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-bottom: 19rpx;
							display: flex;
							justify-content: space-between;

							// text:nth-child(1) {
							// 	margin-right: 20rpx;
							// }

							// text:nth-child(2) {
							// 	margin-right: 20rpx;
							// }
						}

						.right3 {
							height: 23rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-bottom: 19rpx;
							display: flex;
							justify-content: space-between;
							margin-bottom: 47rpx;
							.text {
								width: 240rpx;
								text-align: center;
								height: 35rpx;
								white-space: nowrap; /* 规定文本是否折行 */
								overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
								text-overflow: ellipsis;
							}
						}

						.right4 {
							margin-bottom: 11rpx;
							display: flex;
							justify-content: space-between;

							text {
								display: inline-block;
								text-align: center;
								color: #fefefe;
							}

							text:nth-child(1) {
								width: 136rpx;
								height: 40rpx;
								line-height: 40rpx;
								display: flex;
								justify-content: space-around;

								background: linear-gradient(
									90deg,
									#ff6494 0%,
									#ffa86a 100%
								);
								border-radius: 5rpx;
								margin-right: 20rpx;
							}

							// text:nth-child(2) {
							// 	width: 80rpx;
							// 	height: 40rpx;
							// 	line-height: 40rpx;
							// 	background: linear-gradient(
							// 		180deg,
							// 		#ff6494 0%,
							// 		#ffa86a 100%
							// 	);
							// 	border-radius: 5rpx;
							// 	margin-right: 100rpx;
							// }

							text:nth-child(2) {
								// font-size: 24rpx;
								font-family: 'Microsoft YaHei', PingFang SC;
								font-weight: 500;
								color: #ff0000;
							}
						}

						.right5 {
							text {
								width: 344rpx;
								height: 19rpx;
								font-size: 20rpx;
								font-family: 'Microsoft YaHei', PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}
				}
			}
		}
	}
}
</style>
